<template>
  <div class="video-list-wrap">
    <div class="handle">
       <el-link class="exchange" @click="exchange" :underline="false" type="primary">换一批</el-link>
    </div>
    <div class="video-list">
      <div
        class="video-item"
        :style="`background-image:url(${video.thumbnail})`"
        v-for="(video, index) in videoList"
        :key="index"
        @click="playVideo(video)"
      >
      <img class="play-circle" src="~src/assets/playCircle.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import request from "utils/request";
export default {
  name: "JddChromePluginsVideoList",

  data() {
    return {
      videoList:[],
       pagination: {
        currentPage: 1,
        pageSize: 9,
        total: 0,
        totalPages:0
      },
    };
  },

  mounted() {
    this.getVideoList()
  },

  methods: {
    playVideo(video) {
      this.$router.push({
        path: "/video-player",
        query: {
          id: video.id,
        },
      });
    },
    async  getVideoList(){
      let ret = await request.get("/videoList", {
        currentPage:this.pagination.currentPage,
        pageSize:this.pagination.pageSize,
      });
      if (ret.code == 200 && ret.data.videoList) {
        this.videoList =ret.data.videoList|| [];
        this.pagination.total=ret.data.total|| 0;
        this.pagination.totalPages=ret.data.totalPages|| 0;
      }
    },
        exchange(){
      if (this.pagination.currentPage<this.pagination.totalPages) {
        this.pagination.currentPage++;
        this.getVideoList();
      }else{
         this.pagination.currentPage=1;
          this.getVideoList()
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.video-list-wrap {
  width: 100%;
  min-height: 400px;
  padding: 0px 15px;
  .handle{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    .exchange{
      margin-right: 20px;
    }
  }
  .video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .video-item {
      width: 135px;
      height: 80px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      border-radius: 5px;
      margin: 10px 10px;
      cursor: pointer;
      // background-image: url("https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft14.baidu.com%2Fit%2Fu%3D5660129550384103636%2C9646184020877083611%26fm%3D3008%26app%3D3011%26f%3DJPEG&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1672365916&t=8ffefbf19354db373c5333181ddf6235https://gimg4.baidu.com/poster/src=http%3A%2F%2Ft14.baidu.com%2Fit%2Fu%3D5660129550384103636%2C9646184020877083611%26fm%3D3008%26app%3D3011%26f%3DJPEG&refer=http%3A%2F%2Fwww.baidu.com&app=2004&size=f352,234&n=0&g=0n&q=100?sec=1672365916&t=8ffefbf19354db373c5333181ddf6235");
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      .play-circle{
        position: absolute;
        width: 40px;
        height: 40px;
        left: 50%;
        top: 50px;
        margin-left: -25px;
        margin-top: -30px;
      }
    }
  }
}
</style>